<%--
  Created by IntelliJ IDEA.
  User: kangx
  Date: 2020/8/10
  Time: 14:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>成绩表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${AppPath}/css/font.css">
    <link rel="stylesheet" href="${AppPath}/css/index.css">
    <script src="${AppPath}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${AppPath}/js/index.js"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">考试管理</a>
            <a>
              <cite>查询成绩</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <br/>
                <%--                搜索框--%>
                <div class="demoTable layui-form">
                    &nbsp; &nbsp; &nbsp;
                    <div class="layui-inline">
                        <input class="layui-input" name="stuName" id="stuName" autocomplete="off" placeholder="请输入姓名">
                    </div>
                    <div class="layui-inline" id="deptDiv">
                        <select class="layui-input"  name="dept" id="dept" autocomplete="off" lay-filter="dept">
                            <option value="">请选择院系</option>
                        </select>
                    </div>
                    <div class="layui-inline" id="majorDiv">
                        <select class="layui-input"  name="major" id="major" autocomplete="off" lay-filter="major">
                            <option value="">请选择专业</option>
                        </select>
                    </div>
                    <div class="layui-inline" id="classDiv">
                        <select class="layui-input"  name="class" id="class" autocomplete="off" lay-filter="class">
                            <option value="">请选择班级</option>
                        </select>
                    </div>
                    <div class="layui-inline" id="courseDiv">
                        <select class="layui-input"  name="course" id="course" autocomplete="off" lay-filter="course">
                            <option value="">请选择课程</option>
                        </select>
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <%--        定义一个表格--%>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form" lay-filter="dataTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    layui.use(['laydate','form','table'], function(){
        var  form = layui.form;
        var table = layui.table;
// 班主任展示下拉菜单
        function empSelect() {
            layui.$.ajax({
                url:"${AppPath}/class/selectByExample",
                type:"post",
                data:{"empId":${user.uid},"pageSize":99999},
                success:function(resp){
                    var data=resp.classList;
                    layui.$.each(data,function (index,clazz) {
                        var str='<option value="'+clazz.classId+'">'+clazz.className+'</option>';
                        layui.$("#class").append(str)
                    })
                    form.render();
                }
            })
        }
// 讲师展示下拉菜单
        function teacherSelect(){

            layui.$.ajax({
                url:"${AppPath}/teacherCourse/findClass",
                type:"post",
                data:{"empId":${user.uid},"pageSize":99999},
                success:function(resp){
                    var Data=resp;
                    layui.$.each(Data,function (index,clazz) {
                        var str='<option value="'+clazz.classId.classId+'">'+clazz.classId.className+'</option>';
                        var str1='<option value="'+clazz.courseId.courseId+'">'+clazz.courseId.courseName+'</option>';
                        layui.$("#class").append(str)
                        layui.$("#course").append(str1)
                    })
                    form.render();
                }
            })
        }

        function otherSelect(){
            // 请求院系信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/dept/findAll",
                type:"post",
                success:function(resp){
                    layui.$.each(resp,function (index,dept) {
                        var str='<option value="'+dept.deptId+'">'+dept.deptName+'</option>';
                        layui.$("#dept").append(str)
                    })
                    form.render();
                }
            })

            // 请求专业信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/major/selectByExample",
                type:"post",
                data:{"pageSize":99999},
                success:function(resp){
                    var data=resp.majorList;
                    layui.$.each(data,function (index,major) {
                        var str='<option value="'+major.majorId+'">'+major.majorName+'</option>';
                        layui.$("#major").append(str)
                    })
                    form.render();
                }
            })

            // 请求班级信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/class/selectByExample",
                type:"post",
                data:{"pageSize":99999},
                success:function(resp){
                    var data=resp.classList;
                    layui.$.each(data,function (index,clazz) {
                        var str='<option value="'+clazz.classId+'">'+clazz.className+'</option>';
                        layui.$("#class").append(str)
                    })
                    form.render();
                }
            })

            // 请求课程信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/course/selectByExample",
                type:"post",
                data:{"pageSize":99999},
                success:function(resp){
                    var data=resp.courseList;
                    layui.$.each(data,function (index,course) {
                        var str='<option value="'+course.courseId+'">'+course.courseName+'</option>';
                        layui.$("#course").append(str)
                    })
                    form.render();
                }
            })
        }
        //院系下拉菜单选中回调
        form.on('select(dept)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            // 请求专业信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/major/selectByExample",
                type:"post",
                data:{"deptId":data.value,"pageSize":99999},
                success:function(resp){
                    var data=resp.majorList;
                    var str='<option value="">请选择专业</option>';
                    layui.$.each(data,function (index,major) {
                        str+='<option value="'+major.majorId+'">'+major.majorName+'</option>';
                    })
                    layui.$("#major").html(str)
                    form.render();
                }
            })

            // 请求班级信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/class/selectByExample",
                type:"post",
                data:{"deptId":data.value,"pageSize":99999},
                success:function(resp){
                    var data=resp.classList;
                    var str='<option value="">请选择班级</option>';
                    layui.$.each(data,function (index,clazz) {
                        str+='<option value="'+clazz.classId+'">'+clazz.className+'</option>';
                    })
                    layui.$("#class").html(str)
                    form.render();
                }
            })
        });

        //专业下拉菜单选中回调
        form.on('select(major)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            // 请求班级信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/class/selectByExample",
                type:"post",
                data:{"majorId":data.value,"pageSize":99999},
                success:function(resp){
                    var data=resp.classList;
                    var str='<option value="">请选择班级</option>';
                    layui.$.each(data,function (index,clazz) {
                        str+='<option value="'+clazz.classId+'">'+clazz.className+'</option>';
                    })
                    layui.$("#class").html(str)
                    form.render();
                }
            })
        });

        //班级下拉菜单选中回调
        form.on('select(class)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            // 请求课程信息,并填入下拉菜单
            layui.$.ajax({
                url:"${AppPath}/score/findClassCourse",
                type:"post",
                data:{"classId":data.value},
                success:function(resp){
                    var str='<option value="">请选择课程</option>';
                    layui.$.each(resp,function (index,data) {
                       str+='<option value="'+data.courseId.courseId+'">'+data.courseId.courseName+'</option>';
                    })
                    layui.$("#course").html(str)
                    form.render();
                }
            })
        });

        //判断角色确定访问路劲
        function judgeUrl() {
            var urlForm;
            if (${empRole=='班主任'}){
                urlForm="${AppPath}/score/findBzrScore";
                layui.$("#deptDiv").prop("style","display:none");
                layui.$("#majorDiv").prop("style","display:none");
                empSelect();
            }
            <%--else if (${empRole=='教学主管'}){--%>
            <%--    urlForm="${AppPath}/score/findJxzgScore";--%>
            <%--}--%>
            else if (${empRole=='讲师'}){
                urlForm="${AppPath}/score/findJsScore";
                layui.$("#deptDiv").prop("style","display:none");
                layui.$("#majorDiv").prop("style","display:none");
                teacherSelect();
            }else{
                urlForm="${AppPath}/score/findJyzyScore";
                otherSelect();
            }
            showScore(urlForm)
        }
        judgeUrl();

        //查询
        var $ = layui.$,
            active = {
                reload: function(){
                    var empId = $('#empId');
                    //执行重载
                    table.reload('dataTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            stuName: $("#stuName").val(),
                            deptId:$("#dept").val(),
                            majorId:$("#major").val(),
                            classId:$("#class").val(),
                            courseId:$("#course").val()
                        }
                    },'data');
                }
            };
        //查询按钮添加单机事件
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        // 生成表格
        function showScore(urlForm){

            table.render({
                id:"dataTable",
                elem: '.layui-table-body>.layui-table',//指定表格元素
                url: urlForm,  //请求路径
                cellMinWidth: 10//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
                ,even: true    //隔行换色
                ,page: true  //开启分页
                ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
                ,limit: 10 //每页默认显示的数量
                ,method:'post'  //提交方式
                ,cols: [[
                    {
                        title :'成绩单',
                        align:'center',
                        colspan:'10',
                        rowspan:'1'
                    },
                ], [
                    // {type:'checkbox'}, //开启多选框
                    {
                        title: '序号',
                        type: 'numbers'
                    },
                    {
                        field: 'className', //json对应的key
                        title: '班级',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:'<div>{{d.classId.className}}</div>'//读出外键关系的对象
                    },
                    {
                        field: 'studentName', //json对应的key
                        title: '姓名',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:'<div>{{d.studentId.studentName}}</div>'//读出外键关系的对象
                    },
                    {
                        field: 'courseName', //json对应的key
                        title: '课程',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:'<div>{{d.courseId.courseName}}</div>'//读出外键关系的对象
                    },
                    {
                        field: 'courseAttribute', //json对应的key
                        title: '课程类别',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:'<div>{{d.courseId.courseAttribute}}</div>'//读出外键关系的对象
                    },
                    {
                        field: 'courseTotal', //json对应的key
                        title: '总学时',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:'<div>{{d.courseId.courseTotal}}</div>'//读出外键关系的对象
                    },
                    {
                        field: 'courseScore', //json对应的key
                        title: '学分',   //列名
                        sort: false,   // 默认为 false,true为开启排序
                        templet:'<div>{{d.courseId.courseScore}}</div>'//读出外键关系的对象
                    },
                    {
                        field: 'scoreNum', //json对应的key
                        title: '成绩',   //列名
                        // edit:'text',
                        sort: false   // 默认为 false,true为开启排序
                    },
                ]]
                ,done : function(res, curr, count) {
                    // merge(res);
                }

            })

        }
    });


    function merge(res) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['className','studentName','courseName'];//需要合并的列名称
        var columsIndex = [1,2,3];//需要合并的列索引值
        // var $=layui.jquery;
        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                    mark += 1;
                    tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                        $(this).attr("rowspan", mark);
                    });
                    tdCurArr.each(function () {//当前行隐藏
                        $(this).css("display", "none");
                    });
                }else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }
            }
            mergeIndex = 0;
            mark = 1;
        }
    }


</script>
</html>